<template>
  <el-row class="content-container">
    <el-col :span="6" class="content-left">
      <h3>
        <span style="margin-right: 10px;">{{ title }}</span>
        <el-button @click="flushPage" class="filter-item" type="success" size="small" v-waves icon="el-icon-star-off">
          刷新</el-button>
      </h3>
      <ul v-loading="listLoading" class="dict-list" style="overflow:auto">
        <li id="dictLi" v-for="(i,index) in dictList" class="dict-list-item unselect" @click="clickItem(i, index)">
          <el-col :span="12">{{ i.name }}</el-col>
        </li>
      </ul>
    </el-col>
    <el-col :span="17" class="content-right">
      <el-container>
        <el-header height="20%">
          <h3>
            <span style="margin-right: 10px;">{{ title1 }}</span>
            <el-button @click="handleCreate" class="filter-item" type="primary" size="small" v-waves
              icon="el-icon-plus">添加</el-button>
            <el-button :disabled="btnDisabled" @click="handleDelete" class="filter-item" type="danger" size="small"
              v-waves icon="el-icon-delete">删除</el-button>
          </h3>
          <dict-add ref="dictAdd" @flushPage="flushPage" />
        </el-header>
        <el-main>
          <h3>{{ title2 }}</h3>
          <base-code ref="code" />
        </el-main>
      </el-container>
    </el-col>
  </el-row>
</template>

<script>
  import {
    dictList,
    deleteDict,
  } from '@/api/sys/dict/index';

  import * as common from '@/utils/base/common'

  /* 组件 */
  import baseCode from './code'
  import dictAdd from './components/dict-add'

  export default {
    /* 数据字典 */
    name: 'sys-dict',
    data() {
      return {
        title: '数据字典',
        title1: '主表',
        title2: '从表',
        listLoading: false,
        dictList: null,
        btnDisabled: true, //按钮禁用状态
        dictId: '',
        initDictData: {
          id: '',
          name: ''
        },

      }
    },
    created() {
      this.initData()
    },
    components: {
      'base-code': baseCode,
      'dict-add': dictAdd,
    },
    methods: {

      initData() {
        this.getDictList()
      },

      getDictList() {
        this.listLoading = true;
        dictList().then(response => {
          this.listLoading = false;
          this.dictList = response.data
        }).catch(err => {
          this.listLoading = false;
          common.message(this, 'error', 2, '调用接口失败!')
          console.error(err)
        })
      },

      /**
       * 点击选择数据字典项
       */
      clickItem(item, index) {
        this.setStyles(index)

        this.dictId = item.id
        this.btnDisabled = false
        this.$refs.dictAdd.initData(item, 'update')
        this.$refs.code.getCodeList(this.dictId)
      },

      initStyles() {
        let filterItems = document.getElementsByClassName('dict-list-item')
        for (let i = 0; i < filterItems.length; i++) {
          let currentItem = filterItems[i]
          currentItem.className = 'dict-list-item unselect'
        }
      },

      setStyles(index) {
        let filterItems = document.getElementsByClassName('dict-list-item')
        for (let i = 0; i < filterItems.length; i++) {
          let currentItem = filterItems[i]
          if (index == i) {
            currentItem.className = 'dict-list-item select'
          } else {
            currentItem.className = 'dict-list-item unselect'
          }
        }
      },

      // 刷新整个页面
      flushPage() {
        this.initStyles()
        this.btnDisabled = true
        this.$refs.dictAdd.initData(this.initDictData, 'init')
        this.$refs.code.initData()
        this.getDictList()
      },

      // 点击 添加
      handleCreate() {
        this.$refs.dictAdd.initData(this.initDictData, 'create')
        this.$refs.code.initData()
      },

      // 点击 删除
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDict(this.dictId).then(response => {
            if (response.code === 200) {
              common.message(this, 'success', 2, '删除数据成功!')
              this.flushPage()
            } else {
              common.message(this, 'warning', 2, response.message)
            }
          }).catch(err => {
            common.message(this, 'error', 2, '删除数据失败!')
            console.error(err)
          })
        }).catch(() => {});
      },

    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/tree-list.css";

  .dict-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .dict-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    cursor: pointer;
  }

  .unselect {
    background: #e8f3fe;
    color: #7dbcfc;
  }

  .select {
    background: #409EFF;
    color: #FFFFFF;
  }
</style>
